<template>
  <div>
    <p>App---</p>
    <p>{{ count }}</p>
    <!-- 方式一：在组件上自定义事件 -->
    <!-- <Child @update="update" /> -->
    <!-- @定义的函数名="定义的函数名" -->
    <Child/>
    <B></B>
  </div>
</template>

<script>
// 自定义事件只有在组件实列或是vue的实列
// 谁需要修改数据就要绑定自定义事件
// 在谁那要将修改数据，就要触发事件
/* 
组件之间通讯：
  组件关系有： 1.父子，2，兄弟 3.祖辈
  通信方式：
    1。父子props，props有三种方式
    2.兄弟，通过状态提升，在公共组件里定义数据，定义好方法，传递下去，兄弟调用传来的方法
    3.自定义事件(子夫)
    使用 父：<Xxx @事件名='回调函数'></Xxx>
         zi：@click="事件名"
    4.任意组件传递数据（要知道谁绑定谁触发）
    在Vue的原型上添加全局方法，然后通过组件的实列用这个全局的方法
    $on()绑定事件
    $off()解绑事件
    触发事件：$全局方法.$emit("绑定事件名")

 */
import Child from "./views/Child";
import B from './B.vue'
export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  components: {
    Child,
    B,
  },
  mounted() {
    // 当前组件实例
    console.log(this);
    // 添加自定义事件，参数1时间名 2.回调函数要写在methods里
    this.$bus.$on("add", this.update);
  },
  beforeDestroy() {
    // 解绑自定义事件
    this.$bus.$off("add", this.update);
  },
  methods: {
    update() {
      this.count++;
    },
  },
};
</script>

<style>
</style>